// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

.c-sticky-note {
    background-image: url('/media/img/firefox/nothing-personal/sticky-note-bg.svg');
    background-repeat: no-repeat;
    background-size: contain;
    width: 200px;
    height: 220px;
    margin: $spacing-xl auto $layout-lg;
    padding: $spacing-xl;
    transform: rotate(5deg);
    text-align: center;
    @include text-body-lg;

    p,
    span,
    a {
        font-family: 'Fira Mono', 'Andale Mono', monospace;
    }

    p {
        margin-top: $spacing-xl;
    }

    span {
        font-weight: bold;
    }
}

.c-sticky-note > .c-button-download-thanks {
    margin-bottom: 0;

    a {
        border: 0;
        background: transparent;
        color: $color-black;
        padding: 0;
        @include text-body-lg;

        &:hover,
        &:focus,
        &:active {
            background-color: transparent;
            color: $color-black;
            text-decoration: underline solid $color-black !important; /* stylelint-disable-line declaration-no-important */
            text-decoration-thickness: 2px !important;/* stylelint-disable-line declaration-no-important */
        }
    }

    small {
        display:  none;
    }
}

// If Firefox is unsupported, it'll show an alternative CTA to download Firefox ESR.
// However, the ESR CTA and warning message do not fit in the sticky note,
// so decided to remove the sticky note from the DOM instead.
html.fx-unsupported {
    .c-sticky-note {
        display: none;
    }
}
